<template>
  <LoginDialog></LoginDialog>
  <div class="home_main">
    <el-aside class="aside">
      <Aside></Aside>
    </el-aside>
    <el-container class="container">
      <el-header class="header">
        <Header></Header>
      </el-header>
      <el-main class="main">
        <div class="content">
          <!-- <List></List> -->
          <List 
          v-if="$route.path !== '/myinfo'" 
          :url="url" 
          :params="params"
          :key="isRefresh"
          ></List>
          <RouterView ></RouterView>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import Header from '@/components/header'
import Aside from '@/components/aside'
import List from '@/components/list'
import LoginDialog from '@/components/loginDialog'
import emiter from '@/utils/bus'
import { reactive,ref } from 'vue'

const url='/video/list'
const params=reactive({
    token:'',
    type:''
})

//配合key强制刷新List
const isRefresh=ref(1)

  emiter.on('type',(val)=>{
    params.type=val
    
    isRefresh.value++
  })

</script>

<style lang="less" scoped>
.home_main {
  height: 100%;
  margin-right: 20px;
  min-width: 1200px;
  .aside {
    height: 100%;
    width: 120px;
    position: fixed;
    top: 00px;
    z-index: 3;
    // pointer-events:none
  }
  .container {
    height: 100%;
    .header {
      width: 100%;
      position: fixed;
      background: transparent;
      z-index: 2;
      padding:0;
    }

    .main {
      // padding: ;
      overflow-y: scroll;
      display: flex;
      flex-direction: row;
      padding-bottom: 10px;
      // padding-top:60px;
      padding-left:80px;
      // background-color: aliceblue;

      .aside_left {
        width: 65px;
        height: 100%;
      }
      .content {
        flex: 1;
        height: 100%;
        width: 100%;
        z-index: 1;
        // background-color: aquamarine;
        // background-color: pink;
        // display:flex;
        // flex-direction: column;
        // .header_top{
        //   width:60px;
        //   height:10px;
        //   background-color: aqua;
        //   z-index:3;
        // }


      }
    }
    .main::-webkit-scrollbar {
      width: 0em; /* 设置滚动条宽度 */
    }

    .main::-webkit-scrollbar-thumb {
      background-color: transparent; /* 设置滚动条滑块颜色 */
    }

    .main::-webkit-scrollbar-track {
      background-color: #f1f1f1; /* 设置滚动条轨道颜色 */
    }
  }
}
</style>
